<template>
	<div class="container">
		<div class="main">
			<div class="main_1">
		<el-card class="box-card">
			<template #header>
				<div>
					<el-row :gutter="5">
						<el-col :span="20">
							<div class="card-header_1">
								<el-row :gutter="5" justify="start">
									<el-col :span="2">
										<el-text tag="b" size="large">图片上传</el-text>
									</el-col>
									<el-col :span="2">
										<el-button type="primary"  icon="DocumentAdd"
												size="default">添加水印</el-button>
									</el-col>
									<el-col :span="2">
										<el-button type="primary" @click="drawer=true"  icon="DocumentAdd"
												size="default">水印设置</el-button>
									</el-col>
									<el-col :span="2">
										<el-button type="primary" icon="Download"
												size="default">下载</el-button>
									</el-col>
								</el-row>
							</div>
						</el-col>
						<el-col :span="4">
							<span>最多上传20张，已上传{{fileList.length}}张</span>
						</el-col>
					</el-row>
					
				
				
				</div>
			</template>
		
  <el-upload
    v-model:file-list="fileList"
	action=""
	:auto-upload="false"
    list-type="picture-card"
    :on-preview="handlePictureCardPreview"
    :on-remove="handleRemove"
	multiple
	:limit="20"
  >
    <el-icon><Plus /></el-icon>
  </el-upload>
  </el-card>
</div>
</div>
  <el-dialog v-model="dialogVisible">
	<el-image  :src="dialogImageUrl" :fit="fit" />
  </el-dialog>
  <el-drawer v-model="drawer"  title="水印配置" direction="rtl" :modal="false" :lock-scroll="false"
  	:before-close="handleClose">
	<watermarkStyle :watermarkStyle="watermarkConfig"  ref="watermarkStyleRef"></watermarkStyle>
	</el-drawer>
  </div>
</template>

<script lang="ts" setup>
import { ref ,defineComponent} from 'vue'
import { Plus } from '@element-plus/icons-vue'
import watermarkStyle from '../../components/watermarkStyle.vue'
import type { UploadProps, UploadUserFile } from 'element-plus'
import { Watermark } from '@pansy/watermark';

const fileList = ref<UploadUserFile[]>([])

const dialogImageUrl = ref('')
const dialogVisible = ref(false)
//抽屉状态
	const drawer = ref(false)
	//水印
	const watermarkConfig = {
		gapX: 100,//水印之间的水平间距
		gapY: 100,//水印之间的垂直间距
		offsetLeft: 0,//水印在 canvas 画布上绘制的水平偏移量
		offsetTop: 0,//水印在 canvas 画布上绘制的垂直偏移量
		width: 120,//单个水印宽度
		height: 64,//单个水印高度
		opacity: 0.19,//水印透明度
		rotate: -22,//旋转的角度
		fontSize: 26,//	设置字体大小
		fontStyle: 'normal',//规定字体样式
		fontVariant: 'normal',//规定字体变体
		fontWeight: 300,//设置字体粗细
		fontColor: '#000',//设置字体颜色
		fontFamily: 'sans-serif',
		textAlign: 'center',
		textBaseline: 'alphabetic',
		monitor: false,//是否开启保护模式
		zIndex: 99,
		mode: 'interval',
		pack: true,//是否使用水印组件包裹内容
		blindFontSize: 16,
		blindOpacity: 0.005,
		text: ['LULUTONGNIAN',"LADY'S CHIOSE"],
		blindText: 'LULUTONGNIAN 防盗水印',
		container: 'tw_main',
		image: '',//图片源
	}
const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles)
}

const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url!
  dialogVisible.value = true
  console.log(fileList.value)
}
</script>
<style>
	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
</style>